<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>资讯视频</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="dynamic-main">
        <!-- <div class="nav-top">
            <a class="goback" href="javascript:history.go(-1);"><img class="left-arrow" src="image/left.png" alt=""></a>
            <span>资讯</span>
            <div class="go-home">
                <img class="sm-logo" src="image/sm-logo.jpg" alt="">
                <a href="./index.html">首页</a>
            </div>
        </div> -->
        <!-- <div class="nav-top">
            <div class="head-left">
                <a class="goback" href="javascript:history.go(-1);"><img class="left-arrow" src="image/left.png" alt=""></a>
                <div class="head-label">
                    <img src="image/logo-1.png" alt="">
                    <span>资讯</span>
                </div>
            </div>
            <a class="menus" href=""><img src="image/menu.png" alt=""></a>
        </div> -->
        <div class="news-detail">
            <div class="nav-top">
                <div class="head-label">
                    <a class="goback" href="javascript:history.go(-1);"><img class="left-arrow" src="image/left.png" alt=""></a>
                    <img src="image/logo-1.png" alt="">
                </div>
                <span>资讯</span>
                <div class="nav-img-right">
                    <a class="user-home-img" href=""><img src="image/user.png" alt=""></a>
                    <a class="menus" href="javascript:void;"><img id="menu-arrow"src="image/menu.png" alt=""></a>
                    <img id="down-arrow" src="image/down.png" alt="">
                </div>
            </div>
            <!-- 顶部menu导航菜单 -->
            <div class="nav-menu">
                <ul>
                    <li><a href="">关注</a></li>
                    <li><a href="">新闻</a></li>
                    <li><a href="">资讯</a></li>
                    <li><a href="">产品</a></li>
                    <li><a href="">技术</a></li>
                    <li><a href="">新闻</a></li>
                    <li><a href="">资讯</a></li>
                    <li><a href="">产品</a></li>
                    <li><a href="">技术贴</a></li>
                </ul>
            </div>
        </div>
        <div class="information">
            <div class="information-con">
                <section id="player" style="width: 100%">
                    <video id="media" width="100%" controls="controls">
                        <source src="image/08181.mp4"/>
                    </video>
                </section>
                <p class="information-intro">见证线束加工行业发展新征程一一慕尼黑上
                    海电子生产设备展精彩回顾</p>
                <div class="author">
                    <div class="author-img">
                        <img src="image/red-logo.jpg" alt="">
                        <div class="author-name">
                            <span class="mb6">sylyia</span>
                            <span class="col9">中国传动网</span>
                        </div>
                    </div>
                    <span class="concern">关注</span>
                    <span class="chosed">已关注</span>
                </div>
            </div>
            <div class="recom-con">
                <span class="cola9">推荐内容</span>
                <ul class="recom-con-item">
                    <li class="type-1">
                        <a class="type-link" href="">
                            <div class="img-box"><img class="imgs" src="image/test-1.jpg" alt=""><img class="play" src="image/player.png" alt=""></div>
                            <div class="titles">
                                <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                                <p><span class="cola9">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="type-1">
                        <a class="type-link" href="">
                            <div class="img-box"><img class="imgs" src="image/test-1.jpg" alt=""><img class="play" src="image/player.png" alt=""></div>
                            <div class="titles">
                                <p>浩亭：不断创新，“智”造万物互联的工业世界</p>
                                <p><span class="cola9">中国传动网</span><img src="image/mes.png" alt=""><span class="col32">8356</span></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 评论 -->
            <div>
                <div class="all-comment">
                    <p><span>全部评论</span><span>641条评论</span></p>
                    <p><a href="">最新</a><span>|</span><a href="">最热</a></p>
                </div>
                <div class="comment-con">
                    <ul>
                        <li class="comment-item">
                            <img class="user-img" src="image/01.jpg" alt="">
                            <div>
                                <p>jion</p>
                                <p class="m20 just">中国制造企业将重新拧紧一股绳，国人要共同面对挫折</p>
                                <div class="reply-cons">
                                    <ul class="reply-con">
                                        <li class="item">
                                            <p class="rep"><span>夏天：</span><span class="last">中国企业不会轻易被打倒！</span></p>
                                            <p class="zans"><span>赞6</span>|<span>回复</span></p>
                                        </li>
                                        <li class="item">
                                            <p class="rep"><span>夏天：</span><span class="last">中国企业不会轻易被打倒！中国企业不会轻易被打倒！中国企业不会轻易被打倒！</span></p>
                                            <p class="zans"><span>赞8</span>|<span>回复</span></p>
                                        </li>
                                        <li class="item">
                                            <p class="rep"><span>冬天<a class="col9">回复</a>夏天：</span><span class="last">中国企业不会轻易被打倒！中国企业不会轻易被打倒！中国企业不会轻易被打倒！</span></p>
                                            <p class="zans"><span>赞11</span>|<span>回复</span></p>
                                        </li>
                                    </ul>
                                    <div  data-index="0" class="more">查看更多回复</div>
                                </div>
                                <p>
                                    <a href=""><img class="zan" src="image/zan.png" alt=""><span>赞154</span></a>
                                    <a href=""><img class="reply" src="image/reply.png" alt=""><span class="replys">回复</span></a>
                                </p>
                            </div>
                        </li>
                        <li class="comment-item">
                            <img class="user-img" src="image/01.jpg" alt="">
                            <div>
                                <p>jion</p>
                                <p class="m20 just">中国制造企业将重新拧紧一股绳，国人要共同面对挫折</p>
                                <div class="reply-cons">
                                    <ul class="reply-con">
                                        <li class="item">
                                            <p class="rep"><span>夏天：</span><span class="last">中国企业不会轻易被打倒！</span></p>
                                            <p class="zans"><span>赞6</span>|<span>回复</span></p>
                                        </li>
                                    </ul>
                                    <div  data-index="1" class="more">查看更多回复</div>
                                </div>
                                <p>
                                    <a href=""><img class="zan" src="image/zan.png" alt=""><span>赞154</span></a>
                                    <a href=""><img class="reply" src="image/reply.png" alt=""><span class="replys">回复</span></a>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-com">
                <input type="text" placeholder="说点什么吧...">
                <img src="image/do-collect.png" alt="">
                <img src="image/do-zan.png" alt="">
                <img src="image/do-share.png" alt="">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://img.chuandong.com/common/script/jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script src="js/jqthumb.min.js"></script>
    <script>
        $(function () {
            $('.img-box .imgs').jqthumb({
                width: 115,
                height: 100,
                // after: function(imgObj){
                //     imgObj.css('opacity', 0).animate({opacity: 1}, 2000);
                // }
            })

            // 关注、取消
            $('.concern').hide()
            $('.concern').click(function () {
                $('.chosed').show()
                $('.concern').hide()
            }) 
            $('.chosed').click(function () {
                $('.concern').show()
                $('.chosed').hide()
            }) 
        })

        //查看更多回复
        $(function () {
            $('#shade').hide()
            $('.share-con').hide()
            $('.reply-cons').hide()
            $('.reply-con li').hide()
            for (let x= 0;x<$('.comment-con .comment-item').length;x++) {
                console.log('xxx',x)
                $('.comment-con .comment-item').eq(x).find('.more').click(function () {
                    var index = $('.comment-con .comment-item').eq(x).find('.more').data('index')
                    console.log('dasdsadasd',index)
                    for (let i=0;i<$('.comment-con .comment-item').eq(index).find('.reply-con').children('li').length;i++) {
                        $('.comment-con .comment-item').eq(index).find('.reply-con').children('li').eq(i).show()
                    }
                    $('.comment-con .comment-item').eq(index).find('.reply-cons').children('.more').hide()
                })
                // 初始显示两条
                if ($('.comment-con .comment-item').eq(x).find('.reply-con').children('li').length > 0) {
                    $('.comment-con .comment-item').eq(x).find('.reply-cons').show()
                    // $('.comment-con li').eq(ind).find('.reply-cons').children('.share-con').show()
                    for (let i=0;i<2;i++) {
                        $('.comment-con .comment-item').eq(x).find('.reply-con').children('li').eq(i).fadeIn()
                    }
                }  
            }
        })

        //查看更多回复
        // $(function () {
        //     $('#shade').hide()
        //     $('.share-con').hide()
        //     $('.reply-cons').hide()
        //     $('.reply-con li').hide()
        //     if ($('.reply-con li').length > 2) {
        //         for (let i=0;i<2;i++) {
        //             $('.reply-con li').eq(i).fadeIn()
        //         }
        //     }
        //     if ($('.reply-con li').length !==0) {
        //         $('.reply-cons').show()
        //     }

        //     $('.more').click(function () {
        //         for (let i=0;i<$('.reply-con li').length;i++) {
        //             $('.reply-con li').eq(i).fadeIn()
        //             $('.more').hide()
        //         }
        //     })
        // })
    </script>
</body>
</html>